<template>
  <div class="project-tj">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :data-callback="dataCallback">
      <template #typeId="scope">
        {{ conversionDisplay(scope.row.typeId, dict["projectTypeId"]) }}
      </template>
      <template #industryId="scope">
        {{ conversionDisplay(scope.row.industryId, dict["industry"]) }}
      </template>
      <template #status="scope">
        {{ conversionDisplay(scope.row.status, dict["projectStatus"]) }}
      </template>
      <template #planStartTime="scope">
        {{ scope.row.planStartTime ? dayJs(scope.row.planStartTime).format("YYYY-MM-DD") : "--" }}
      </template>
      <template #planEndTime="scope">
        {{ scope.row.planEndTime ? dayJs(scope.row.planEndTime).format("YYYY-MM-DD") : "--" }}
      </template>
      <template #startTime="scope">
        {{ scope.row.startTime ? dayJs(scope.row.startTime).format("YYYY-MM-DD") : "--" }}
      </template>
      <template #endTime="scope">
        {{ scope.row.endTime ? dayJs(scope.row.endTime).format("YYYY-MM-DD") : "--" }}
      </template>
    </ProTable>
  </div>
</template>
<script lang="ts" setup name="reportProject">
import ProTable from "@/components/ProTable/index.vue";
import { Dict } from "@/api/interface";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { projectPage } from "@/api/modules/statistics";
import { ref, reactive, getCurrentInstance } from "vue";
import { getParamByParentIdList } from "@/api/modules/sys";
import dayJs from "dayjs";

const cxt = getCurrentInstance();
const dict = cxt?.appContext.config.globalProperties.$dict;
let dictList: Dict.ResDictList = reactive({});
const proTable = ref<ProTableInstance>();

const getTableList = async (params: any) => {
  const list: string[] = [dict.projectTypeId, dict.industry, dict.projectStatus];
  dictList = await getDicList({ parentIdList: list.join(",") });
  const newParams = {
    currentPage: params.pageNum,
    searchKey: params.searchKey ? params.searchKey : ""
  };
  return projectPage(newParams);
};
// 表格配置项
const columns: ColumnProps[] = [
  { prop: "name", label: "项目名称" },
  { prop: "userName", label: "用户名", isShow: false },
  { prop: "avatarUrl", label: "头像", isShow: false },
  { prop: "description", label: "描述", isShow: false },
  { prop: "code", label: "项目编号" },
  { prop: "typeId", label: "项目类型", isShow: false },

  { prop: "companyName", label: "客户" },
  { prop: "companyFinalName", label: "终端客户" },
  { prop: "countryName", label: "国家名字", isShow: false },
  { prop: "province", label: "省", isShow: false },
  { prop: "city", label: "城市", isShow: false },
  { prop: "district", label: "区域", isShow: false },

  { prop: "address", label: "详细地址", isShow: false },
  { prop: "hardwareContent", label: "硬件非标定制内容", isShow: false },
  { prop: "hardwareCycle", label: "硬件非标定制周期（天）", isShow: false },
  { prop: "softwareContent", label: "软件非标定制内容", isShow: false },
  { prop: "softwareCycle", label: "软件非标定制周期（天）", isShow: false },
  { prop: "agvCount", label: "车辆数", isShow: false },
  { prop: "industryId", label: "行业", isShow: false },
  // { prop: "progressId", label: "项目进度" },
  { prop: "status", label: "项目状态" },

  { prop: "statusDescription", label: "状态描述", isShow: false },
  { prop: "signContractTime", label: "合同签订日期", isShow: false },
  { prop: "planStartTime", label: "计划开始时间" },
  { prop: "planEndTime", label: "计划结束时间" },
  { prop: "startTime", label: "实际开始时间" },
  { prop: "endTime", label: "实际结束时间" }
];

// 获取字典数据
const getDicList = async (params: Dict.ResDictList) => {
  const { data } = await getParamByParentIdList(params);
  return data || [];
};
// 转换显示
const conversionDisplay = (id: string, type: string) => {
  const listItem = dictList[type]?.find(item => item.id === id);
  return listItem?.name;
};

const dataCallback = (data: any) => {
  // 处理字段文字
  data.records =
    data.records &&
    data.records.map(item => {
      item.companyName = item?.orderModel?.companyName;
      return item;
    });
  return {
    list: data.records,
    total: Number(data.total),
    pageNum: Number(data.current),
    pageSize: Number(data.size)
  };
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
